<template>
  <div class="strategy-out feature-out">
    <div ref="searchDiv" class="filter-container">
      <el-select
        v-model="tableQuery.search.projectName"
        size="small"
        clearable
        placeholder="项目名"
        class="filter-item"
      >
        <el-option
          v-for="item in searchField.projects"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="width:195px;"
        ></el-option>
      </el-select>
      <el-select
        v-model="tableQuery.search.strategyName"
        size="small"
        clearable
        placeholder="策略名"
        class="filter-item"
      >
        <el-option
          v-for="item in searchField.strategyNames"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="width:195px;"
        ></el-option>
      </el-select>
      <el-button
        @click="handleFilter"
        size="small"
        type="primary"
        ref="btnQuery"
        class="filter-item"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        ref="btnRefresh"
        class="filter-item"
        >重置</el-button
      >
    </div>

    <el-table
      :data="tableData"
      highlight-current-row
      :show-overflow-tooltip="true"
      :max-height="tableHeight"
      style="width: 100%;margin-bottom: 12px;"
    >
      <el-table-column
        label="项目名"
        prop="projectName"
        align="center"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="策略名"
        prop="name"
        align="center"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="知识包名"
        prop="packageName"
        align="center"
        min-width="180"
      ></el-table-column>
      <el-table-column
        label="线上版本号"
        prop="versions"
        align="center"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="最新版本号"
        prop="newVersion"
        align="center"
        min-width="120"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200px">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="lookUp(scope.row.packageName, scope.row.projectName)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="
              releaseAdministration(
                scope.row.packageName,
                scope.row.projectName
              )
            "
            >发布管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="tableQuery.page"
        :page-sizes="[10, 20, 50]"
        :page-size="tableQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 查看 -->
    <el-dialog
      title="贷前审批策略"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="testVisible"
      width="80%"
    >
      <el-table
        ref="testMultipleTable"
        :data="detailData"
        fit
        style="width: 100%"
        max-height="400px"
      >
        <el-table-column
          label="版本号"
          prop="version"
          align="center"
        ></el-table-column>
        <el-table-column
          label="版本描述"
          prop="versionDesc"
          align="center"
          min-width="160"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
          min-width="160"
        ></el-table-column>
        <el-table-column
          label="创建人"
          prop="creator"
          align="center"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          align="center"
          min-width="160"
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="mode"
          align="center"
          width="100"
          column-key="date"
          :filters="[
            { text: '评测中', value: 'evaluation' },
            { text: '已发布', value: 'online' },
            { text: '未使用', value: 'unused' },
            { text: '已停用', value: 'stop' }
          ]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="
                scope.row.mode === 'evaluation'
                  ? 'warning'
                  : scope.row.mode === 'online'
                  ? 'success'
                  : scope.row.mode === 'stop'
                  ? 'info'
                  : ''
              "
            >
              {{
                scope.row.mode === 'evaluation'
                  ? '评测中'
                  : scope.row.mode === 'online'
                  ? '已发布'
                  : scope.row.mode === 'stop'
                  ? '已停用'
                  : '未使用'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="灰度比例" prop="rate" align="center">
          <template slot-scope="scope">
            {{ scope.row.rate + '%' }}
          </template>
        </el-table-column>
        <el-table-column label="评测管控" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleDetail(scope.row)"
              type="text"
              size="small"
            >
              评测结果
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="testVisible = false" ref="btnCancel"
          >取 消</el-button
        >
        <el-button type="primary" @click="testSave">确 定</el-button>
      </div> -->
    </el-dialog>

    <!-- 发布管理 -->
    <el-dialog
      :title="
        releaseVisible
          ? '发布（灰度比例和必须为100）'
          : openOrStop
          ? '评测实验'
          : '贷前审批策略'
      "
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="pubVisible"
      width="80%"
    >
      <div>{{ pubVisibleTitle }}</div>
      <div
        style="font-size: 14px; padding-bottom: 10px;display: flex;justify-content: space-between;"
      >
        <div>
          <el-button type="primary" size="small" @click="release()">
            发布
          </el-button>
          <el-button type="primary" size="small" @click="open()">
            开启评测
          </el-button>
          <el-button type="primary" size="small" @click="stop()">
            停止评测
          </el-button>
        </div>
        <el-button
          type="primary"
          v-if="openOrStop || releaseVisible"
          @click="back()"
          size="small"
          >返回</el-button
        >
      </div>
      <div v-if="!openOrStop">
        <el-table
          :data="detailData"
          fit
          key="1"
          max-height="400px"
          style="width: 100%"
        >
          <el-table-column
            label="版本号"
            prop="version"
            align="center"
          ></el-table-column>
          <el-table-column
            label="版本描述"
            prop="versionDesc"
            align="center"
            min-width="160"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            min-width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="创建人"
            prop="creator"
            align="center"
          ></el-table-column>
          <el-table-column
            label="更新时间"
            prop="updateTime"
            min-width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="状态"
            prop="mode"
            align="center"
            width="100"
            column-key="date"
            :filters="[
              { text: '评测中', value: 'evaluation' },
              { text: '已发布', value: 'online' },
              { text: '未使用', value: 'unused' },
              { text: '已停用', value: 'stop' }
            ]"
            :filter-method="filterHandler"
          >
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="
                  scope.row.mode === 'evaluation'
                    ? 'warning'
                    : scope.row.mode === 'online'
                    ? 'success'
                    : scope.row.mode === 'stop'
                    ? 'info'
                    : ''
                "
              >
                {{
                  scope.row.mode === 'evaluation'
                    ? '评测中'
                    : scope.row.mode === 'online'
                    ? '已发布'
                    : scope.row.mode === 'stop'
                    ? '已停用'
                    : '未使用'
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="!openOrStop || releaseVisible"
            label="是否启用"
            prop="status"
            align="center"
            min-width="130px"
          >
            <template v-if="!openOrStop || releaseVisible" slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                :disabled="
                  openOrStop ||
                    (releaseVisible && Number(scope.row.rate) !== '-'
                      ? true
                      : false)
                "
                @change="changeStatus(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="灰度比例"
            prop="rate"
            align="center"
            width="120px"
          >
            <template slot-scope="scope">
              <el-input-number
                :controls="false"
                :precision="0"
                v-if="releaseVisible"
                v-model="scope.row.rate"
                size="mini"
                style="width: 70px;"
              >
              </el-input-number>
              <span v-else>{{ scope.row.rate + '%' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="openOrStop">
        <el-table
          ref="multipleTable"
          :data="detailData"
          @selection-change="handleSelectionChange"
          fit
          max-height="400px"
          style="width: 100%"
        >
          <el-table-column
            label="版本号"
            prop="version"
            align="center"
          ></el-table-column>
          <el-table-column
            label="版本描述"
            prop="versionDesc"
            align="center"
            min-width="160"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            min-width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="创建人"
            prop="creator"
            align="center"
          ></el-table-column>
          <el-table-column
            label="更新时间"
            prop="updateTime"
            min-width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="状态"
            prop="mode"
            align="center"
            width="100"
            column-key="date"
            :filters="[
              { text: '评测中', value: 'evaluation' },
              { text: '已发布', value: 'online' },
              { text: '未使用', value: 'unused' },
              { text: '已停用', value: 'stop' }
            ]"
            :filter-method="filterHandler"
          >
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="
                  scope.row.mode === 'evaluation'
                    ? 'warning'
                    : scope.row.mode === 'online'
                    ? 'success'
                    : scope.row.mode === 'stop'
                    ? 'info'
                    : ''
                "
              >
                {{
                  scope.row.mode === 'evaluation'
                    ? '评测中'
                    : scope.row.mode === 'online'
                    ? '已发布'
                    : scope.row.mode === 'stop'
                    ? '已停用'
                    : '未使用'
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55"> </el-table-column>
        </el-table>
      </div>
      <div
        v-if="openOrStop || releaseVisible"
        slot="footer"
        class="dialog-footer"
      >
        <!-- <el-button @click="pubVisible = false" ref="btnCancel">取 消</el-button> -->
        <el-button type="primary" @click="pubSave">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import TitleContainer from '@/components/title/TitleContainer.vue'
import {
  getStrategyList,
  searchField,
  getStrategyDetail,
  changeStatus,
  strategyTest,
  strategyPublish
} from '@/api/risksystem/strategy/strategy.ts'
@Component({
  name: 'strategy',
  components: {
    //引用的组件在这里声明
    TitleContainer
  }
})
export default class extends Vue {
  private tableQuery: any = {
    limit: 10,
    page: 1,
    search: {
      projectName: null,
      strategyName: null
    }
  }
  // 列表
  private tableData = []
  private tableHeight: any = null
  // 查看、发布管理
  private detailData: any = []
  private searchData: any = {}
  // 发布管理
  private releaseVisible = false // 发布
  private strategyData: any = [] // 发布内容
  private openOrStop = false // 开始评测
  private pubVisibleTitle = ''
  private openOrStopStatus: any = null
  private total = 0
  private tableLoading = true
  private searchField = {}

  private pubVisible = false
  private testVisible = false
  private multipleSelection = []
  private publishedIds = []
  private evaluatingVisible = false
  // 策略发布前获取产品
  private saveParamsBeforeSelect = []
  private saveParamsBeforeValue = ''
  private outsideConfig = []

  private saveParamsAfterTableData: any = []
  private filteredTableData = []

  created() {
    this.getList()
    this.search()
  }
  mounted() {
    this.init()
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }
  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 230
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 230
      })
    }
  }
  // 列表获取
  private async getList() {
    this.tableLoading = true
    const data: any = await getStrategyList(this.tableQuery)
    if (data.code === 0) {
      this.total = Number(data.data.total)
      this.tableData = data.data.rows
    }
  }
  // 分页部分
  private handleFilter() {
    this.tableQuery.page = 1
    this.getList()
  }
  private handleReset() {
    this.tableQuery = {
      limit: 10,
      page: 1,
      search: {
        projectName: null,
        strategyName: null
      }
    }
    this.getList()
  }
  private handleSizeChange(val: any) {
    this.tableQuery.limit = val
    this.getList()
  }
  private handleCurrentChange(val: any) {
    this.tableQuery.page = val
    this.getList()
  }
  // 查看
  private lookUp(project: any, strategy: any) {
    console.log(project, strategy)
    this.testVisible = true
    this.searchData = {
      packageName: project,
      projectName: strategy,
      status: null,
      mode: null
    }
    this.getStrategyDetail(this.searchData)
  }
  // 详情-发布-评测
  private async getStrategyDetail(searchData: any) {
    const data: any = await getStrategyDetail({ search: searchData })
    if (data.code === 0) {
      this.detailData = data.data.rows
    }
  }
  // 发布管理按钮
  private releaseAdministration(project: any, strategy: any) {
    // this.pubVisibleTitle = strategy
    this.releaseVisible = false // 发布输入框
    this.openOrStop = false // 评测
    this.pubVisible = true
    this.searchData = {
      packageName: project,
      projectName: strategy,
      status: null,
      mode: null
    }
    this.getStrategyDetail(this.searchData)
  }
  // 改变状态
  private async changeStatus(row: any) {
    var statusData = {
      items: this.strategyData,
      packageName: this.searchData.packageName,
      projectName: this.searchData.projectName,
      status: null,
      mode: null
    }
    const data: any = await changeStatus({ id: row.id, status: row.status })
    if (data.code === 0) {
      this.$message.success('修改成功')
      this.getStrategyDetail({
        packageName: this.searchData.packageName,
        projectName: this.searchData.projectName,
        status: null,
        mode: null
      })
    }
    if (data.code === 100012) {
      this.$message.error('发布版本不允许改变状态')
      this.getStrategyDetail({
        packageName: this.searchData.packageName,
        projectName: this.searchData.projectName,
        status: null,
        mode: null
      })
    }
  }
  // 发布按钮
  private release() {
    this.releaseVisible = true // 发布输入框
    this.openOrStop = false // 评测
    this.searchData.status = null
    this.searchData.mode = null
    this.searchData.status = 1
    this.searchData.mode = null
    this.getStrategyDetail(this.searchData)
  }
  // 策略发布
  private async strategyPublish(strategyData: any) {
    const data: any = await strategyPublish(strategyData)
    if (data.code === 0) {
      this.$message.success('发布成功！')
      this.getStrategyDetail({
        packageName: this.searchData.packageName,
        projectName: this.searchData.projectName
      })
      // this.pubVisible = false
    }
  }
  // 开始评测按钮
  private open() {
    this.releaseVisible = false // 发布输入框
    this.openOrStop = true // 评测
    this.openOrStopStatus = 1
    this.searchData.status = ''
    this.searchData.mode = ''
    this.searchData.status = 1
    this.searchData.mode = 'unused'
    this.getStrategyDetail(this.searchData)
  }
  // 停止评测按钮
  private stop() {
    this.releaseVisible = false // 发布输入框
    this.openOrStop = true // 评测
    this.openOrStopStatus = 0
    this.searchData.status = ''
    this.searchData.mode = ''
    this.searchData.status = 1
    this.searchData.mode = 'evaluation'
    this.getStrategyDetail(this.searchData)
  }
  // 勾选
  private handleSelectionChange(val: any) {
    this.multipleSelection = val
    console.log(this.multipleSelection)
  }
  // 评测保存
  private async strategyTest(testData: any) {
    const data: any = await strategyTest(testData)
    if (data.code === 0) {
      this.$message.success(
        this.openOrStopStatus === 1 ? '开启评测成功！' : '停止评测成功！'
      )
      this.getStrategyDetail({
        packageName: this.searchData.packageName,
        projectName: this.searchData.projectName
      })
      this.openOrStop = false // 评测
    }
  }
  private pubSave() {
    this.strategyData = []
    if (this.releaseVisible) {
      // 发布
      this.detailData.forEach((item: any) => {
        var arr = {
          id: item.id,
          probability: item.rate
        }
        this.strategyData.push(arr)
      })
      var releaseVisibleData = {
        items: this.strategyData,
        packageName: this.searchData.packageName,
        projectName: this.searchData.projectName
      }
      this.releaseVisible = false
      this.strategyPublish(releaseVisibleData)
    } else if (this.openOrStop) {
      // 评测
      this.multipleSelection.forEach((item: any) => {
        var arr = { id: item.id, status: this.openOrStopStatus }
        this.strategyData.push(arr)
      })
      var openOrStopData = {
        items: this.strategyData,
        packageName: this.searchData.packageName,
        projectName: this.searchData.projectName
      }
      this.strategyTest(openOrStopData)
    } else {
      this.pubVisible = false
    }
  }
  private back() {
    var backData = {
      items: this.strategyData,
      packageName: this.searchData.packageName,
      projectName: this.searchData.projectName,
      status: null,
      mode: null
    }
    this.openOrStop = false
    this.releaseVisible = false
    this.getStrategyDetail(backData)
  }
  // 状态筛选
  private filterHandler(value: any, row: any, column: any) {
    const property = column['property']
    return row[property] === value
  }
  // 评测结果-报表详情页
  private handleDetail(row: any) {
    this.$router.push({
      path: '/risksystem/strategy/detail',
      query: {
        id: row.id,
        projectName: row.projectName,
        packageName: row.packageName
      }
    })
  }
  private async search() {
    const { data } = await searchField()
    this.searchField = data
  }
}
</script>
<style scoped>
.strategy-out {
  padding: 20px;
}
.table-container {
  margin-bottom: 20px;
}
</style>
